<template>
	<view class="min-h-screen overflow-hidden order-list" :style="themeColor()">
		<view class="left-0 top-0 right-0 z-10" v-if="statusLoading">
			<scroll-view scroll-x="true" class="scroll-Y box-border px-[30rpx] bg-white">
				<view class="flex whitespace-nowrap justify-between">
					<view :class="['text-[28rpx] leading-[90rpx]', { 'class-select': orderState === item.status.toString() }]" @click="orderStateFn(item.status)" v-for="(item, index) in orderStateList">{{ item.name }}</view>
				</view>
			</scroll-view>
		</view>

		<mescroll-body ref="mescrollRef" top="90rpx" @init="mescrollInit" :down="{ use: false }" @up="getShopOrderFn">
			<view class="mx-[30rpx] mt-[20rpx]" v-if="list.length">
				<template v-for="(item, index) in list" :key="index">
					<view class="mb-[20rpx] bg-[#fff] p-[20rpx] rounded-[16rpx]">
						<view>
							<view class="flex justify-between items-center">
								<view class="text-[#303133] text-[28rpx] font-400 leading-[30rpx]">{{ t('orderNo') }}：{{ item.order_no }}</view>
								<view class="text-[#EF900A] text-[28rpx]">{{ item.status_name.name }}</view>
							</view>
							<view class="flex box-border mt-[30rpx]" v-for="(subitem, index) in item.order_goods" :key="index">
								<view class="w-[150rpx] h-[150rpx]">
									<u--image class="rounded-[10rpx] overflow-hidden" width="150rpx" height="150rpx" :src="img(subitem.goods_image_thumb_small ? subitem.goods_image_thumb_small : '')" model="aspectFill">
										<template #error>
											<image class="rounded-[10rpx] overflow-hidden w-[150rpx] h-[150rpx]" :src="img('static/resource/images/diy/shop_default.jpg')" mode="aspectFill"></image>
										</template>
									</u--image>
								</view>
								<view class="ml-[20rpx] flex flex-1 flex-col justify-between box-border">
									<view>
										<text class="text-[28rpx] text-item  leading-[40rpx] text-[#303133]">{{ subitem.goods_name }}</text>
										<view  v-if="subitem.sku_name">
											<view class="text-[24rpx] truncate mt-[10rpx] text-[#999] leading-[28rpx] max-w-[480rpx]">{{ subitem.sku_name }}</view>
										</view>
									</view>
									<view class="flex justify-between items-center text-[#303133]">
										<view class="text-right leading-[28rpx] price-font">
												<text class="text-[24rpx]">￥</text>
												<text class="text-[32rpx] font-500">{{parseFloat(subitem.price).toFixed(2).split('.')[0] }}</text>
												<text class="text-[22rpx] font-500">.{{parseFloat(subitem.price).toFixed(2).split('.')[1] }}</text>
										</view>
										<text class="text-right text-[26rpx]">x{{ subitem.num }}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="flex justify-between items-center  mt-[20rpx]">
							<text class="text-[#666] text-[24rpx]">{{ item.create_time }}</text>
							<view class="flex items-center">
								<view class="text-[#999] text-[22rpx] mr-[4rpx]">{{ t('actualPayment') }}：</view>
								<view class="text-[var(--price-text-color)] price-font">
										<text class="text-[26rpx]">￥</text>
										<text class="text-[36rpx] font-500">{{ parseFloat(item.order_money).toFixed(2).split('.')[0]  }}</text>
										<text class="text-[24rpx] font-500">.{{ parseFloat(item.order_money).toFixed(2).split('.')[1]  }}</text>
								</view>
							</view>
						</view>
						<view class="flex justify-end text-[28rpx] mt-[20rpx] items-center" v-if="item.status == 2">
              <view
                  class="inline-block text-[24rpx] leading-[52rpx] px-[23rpx] border-[2rpx] border-solid border-[#999] rounded-full text-[#303133] box-border"
                  @click.stop="orderFahuoBtnFn(item)">发货</view>
						</view>
					</view>
				</template>
			</view>
			<view class="mx-[30rpx] mt-[20rpx] rounded-[16rpx] flex items-center justify-center noData dis_flex" v-if="!list.length && loading">
<!--				<mescroll-empty :option="{tip : '暂无订单'}"></mescroll-empty>-->
        <img src="@/image/goods/no_data.png" alt="" class="h-[242rpx] w-[297.44rpx]"/>
        <text class="text-[#999] text-[30rpx] mt-[20rpx]">暂无订单</text>
			</view>
		</mescroll-body>
    <!-- 发货 -->
    <u-popup :zIndex="10075" :show="fahuoPopup" :round="16" mode="center" :closeable="true" @close="fahuoPopup = false" :closeOnClickOverlay="false">
      <view class="pt-[30rpx] px-[32rpx] pb-[20rpx]">
        <view class="text-center text-[32rpx] font-700 text-[#323233]">发货</view>
        <scroll-view :scroll-y="true" class="my-[20rpx] w-[100%] overflow-auto">
          <view class="p-[20rpx] bg-[#f5f5f5] rounded mt-[20rpx]" @click="companySheetShow = true">
            <view v-if="!formData.company_name" class="text-gray-placeholder text-[28rpx] flex-1">请选择快递公司</view>
            <view v-else class="text-[28rpx] flex-1">{{ formData.company_name }}</view>
          </view>
          <view class="p-[20rpx] bg-[#f5f5f5] rounded mt-[20rpx]">
            <u-input fontSize="28rpx" v-model="formData.number" border="none" clearable maxlength="25" :placeholder="'请输入配送单号'"/>
          </view>
        </scroll-view>
        <view class="flex items-center justify-between">
          <button class="primary-btn-bg px-[20rpx] h-[55rpx] text-[#fff] text-[28rpx] border-[2rpx] leading-[55rpx] rounded-[50rpx]" shape="circle" @click="fahuoFn()">确定</button>
          <button class="px-[20rpx] h-[55rpx] text-[#000] text-[28rpx] leading-[55rpx] rounded-[50rpx] border-[2rpx] border-solid border-[#8288A2]" shape="circle" @click="fahuoPopup = false">取消</button>
        </view>
      </view>
    </u-popup>
    <!-- 快递公司 -->
    <u-action-sheet :zIndex="10076" :cancelText="'取消'" :actions="companyList" :show="companySheetShow"
                    :safeAreaInsetBottom="true"
                    @close="companySheetShow = false" @select="updateCompany"></u-action-sheet>
	</view>
</template>

<script setup lang="ts">
import {computed, ref} from 'vue';
import {language, t} from '@/locale'
import { img, redirect } from '@/utils/common';
import {getShopOrderStatus} from '@/addon/shop/api/order';
import MescrollBody from '@/components/mescroll/mescroll-body/mescroll-body.vue';
import MescrollEmpty from '@/components/mescroll/mescroll-empty/mescroll-empty.vue';
import useMescroll from '@/components/mescroll/hooks/useMescroll.js';
import { onLoad, onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import useConfigStore from "@/stores/config";
import {myGoodsOrderList ,myGoodsOrderFahuo,expressCompanyList} from "@/addon/ershou/api/esgoods";

const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);
const list = ref<Array<Object>>([]);
const loading = ref<boolean>(false);
const statusLoading = ref<boolean>(false);
const orderState = ref('')
const orderStateList = ref([]);
const evaluateConfig = ref("")

const mch_id = ref('')
const isTradeManaged = ref(false)
const companySelect = ref([]);

onLoad((option) => {
	orderState.value = option.status || "";
	getShopOrderStatusFn();
  if(companySelect.value.length == 0){
    expressCompanyList({}).then(res => {
      companySelect.value = [];
      Object.values(res.data).forEach((item, index) => {
        companySelect.value.push({ name: item.company_name, value: item.company_id });
      });
    })
  }
});

const getShopOrderFn = (mescroll) => {
	loading.value = false;
	let data: object = {
		page: mescroll.num,
		limit: mescroll.size,
		status: orderState.value,
	};

  myGoodsOrderList(data).then((res) => {
		let newArr = (res.data.data as Array<Object>);
		//设置列表数据
		if (mescroll.num == 1) {
			list.value = []; //如果是第一页需手动制空列表
		}
		list.value = list.value.concat(newArr);
		mescroll.endSuccess(newArr.length);

        mch_id.value = res.data.mch_id;
        isTradeManaged.value = res.data.is_trade_managed;
		loading.value = true;
	}).catch(() => {
		loading.value = true;
		mescroll.endErr(); // 请求失败, 结束加载
	})
}

const getShopOrderStatusFn = () => {
	statusLoading.value = false;
	orderStateList.value = [];
	let obj = { name: '全部', status: '' };
	orderStateList.value.push(obj);

	getShopOrderStatus().then((res) => {
		Object.values(res.data).forEach((item, index) => {
			orderStateList.value.push(item);
		});
		statusLoading.value = true;
	}).catch(() => {
		statusLoading.value = true;
	})
}

const orderStateFn = (status) => {
	orderState.value = status.toString();
	list.value = [];
	getMescroll().resetUpScroll();
};

const fahuoPopup = ref(false)//发货弹窗
const orderInfo = ref('')//订单内容
const orderFahuoBtnFn = (item:any) => {
  fahuoPopup.value = true;
  orderInfo.value = item;
  formData.value.company_id=0;
  formData.value.number='';
  formData.value.company_name='';
}
const formData = ref({
  company_id: 0,
  number: '',
  company_name:'',
})
const fahuoFn = () => {
  if(!formData.value.company_id){
    uni.showToast({
      title: '请选择快递公司',
      icon: 'none'
    });
    return false;
  }
  if(!formData.value.number){
    uni.showToast({
      title: '请输入配送单号',
      icon: 'none'
    });
    return false;
  }
  fahuoPopup.value = false;
  myGoodsOrderFahuo({
    order_id: orderInfo.value.order_id,
    order_goods_ids: [orderInfo.value.order_goods[0].order_goods_id],
    company_id:formData.value.company_id,
    number:formData.value.number
  }).then((data) => {
    getMescroll().resetUpScroll();
  })
}

const companySheetShow = ref(false)
const companyList = computed(() => {
  return companySelect.value;
})
/**
 * 选择快递公司
 */
const updateCompany = (e) => {
  companySheetShow.value = false;
  formData.value.company_id = e.value;
  formData.value.company_name = e.name;
}
</script>
<style>
.order-list .mescroll-body {
	padding-bottom: constant(safe-area-inset-bottom) !important;
	padding-bottom: env(safe-area-inset-bottom) !important;
}
:deep(.u-popup__content){
  width: 80% !important;
}
:deep(.u-action-sheet__cancel){
  padding: 0 !important;
}
</style>
<style lang="scss" scoped>
.text-item {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.text-color {
	color: var(--primary-color);
}

.bg-color {
	background-color: var(--primary-color);
}

.class-select {
	position: relative;
	font-weight: 500;
	color: var(--primary-color);
	&::before {
		content: "";
		position: absolute;
		bottom: 0;
		height: 4rpx;
		border-radius: 4rpx;
		background-color: var(--primary-color);
		width: 40rpx;
		left: 50%;
		transform: translateX(-50%);
	}
}
.noData{
	height: calc(100vh - 130rpx - constant(safe-area-inset-bottom));
	height: calc(100vh - 130rpx - env(safe-area-inset-bottom));
 }
.dis_flex {
  flex-direction: column;
}
</style>
